<!--  -->
<template>
    <div class="valid-period">
        <div class="modal-icon-wrapper">
            <div class="modal-circle-o"></div>
            <div class="modal-circle-i"></div>
            <i class="platformicon icon_jinggao modal-icon"></i> 
        </div>
        <div class='valid-period-wrapper'>
            <p class="valid-label">{{label}}</p>
            <TextArea  class="valid-textarea" v-model="textValue"  :placeHolder="placeHolder" @change="inputChange"  ref="textarea-value"/>
            <p class="valid-error">{{placeHolder}}</p>
        </div>
        <div class="modal-btn" @click="validBtn" >{{$t('cmlpanel.confirm')}}</div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import { Input } from 'ant-design-vue';
import EventBus from '@/assets/js/app/cmlpanel/util/bus.js'
import * as anov from 'anov-core'
import { setTimeout } from 'timers';
const { TextArea } = Input;
export default {
    name: 'validPeriod',
    components: {},
    data() {
        return {
            label: '身份认证已过期，请重新输入验证码：',
            validTextarea: '',
            placeHolder: '请输入有效的许可证',
            textValue: ''
        };
    },
    computed: {
        ...anov.licenseServer.mapState(['code'])
    },
    watch: {},
    methods: {
        getLicense(){
            anov.licenseServer.addEventListener("noPass",(e)=>{
                let params = {type: 'error', componentsName: 'validPeriod'}
                this.label = e.result.message
                // EventBus.$emit('openModal', params)
            })
        },
        init(){
            let _this = this
            this.tl = new TimelineMax({
                autoRemoveChildren: true,
                onStart: function(){
                }
            })
            let tw1 = TweenMax.to('.valid-period', 0.3, {opacity: 1})
            let tw4 = TweenMax.to('.valid-period .modal-icon-wrapper', 0.3, { scale: 1, opacity: 1, ease: Power0.easeInOut})
            let tw5 = TweenMax.to('.valid-period .modal-icon', .2, {opacity: 1, scale: 1})
            let tw8 = TweenMax.to('.valid-period .valid-period-wrapper', 0.3, {opacity: 1})
            let tw9 = TweenMax.to('.valid-period .modal-btn', 0.3, {opacity: 1})
            this.tl.addLabel('start')
            this.tl
                .add(tw1, 'start+=0')
                .add(tw4, 'start+=0.1')
                .add(tw5, 'start+=0.2')
                .add(tw8, 'start+=.4')
                .add(tw9, 'start+=.4')
        },
        reset(){
            this.tl.reverse();
            TweenMax.set('.valid-period', {opacity: 0})
            TweenMax.set('.valid-period .modal-icon-wrapper', { scale: 0, opacity: 0})
            TweenMax.set('.valid-period .modal-icon', {opacity: 0, scale: 0})
            TweenMax.set('.valid-period .modal-text', {opacity: 0 })
            TweenMax.set('.valid-period .modal-btn', {opacity: 0})
        },
        destroy(params){
            let textareaVal = this.$refs['textarea-value'].value
            let code = this.textValue
            anov.licenseServer.code = code;
            let obj = anov.licenseServer.validate()
            if(obj.isValid){
                TweenMax.to('.valid-error', .3, {opacity: 0, height: 0})
                TweenMax.to('.valid-period .modal-btn', 0.3, {opacity: 1})
                this.reset()
                if(typeof params.onClose == "function"){
                    params.onClose()
                }
                // EventBus.$emit('closeModal', {noticeType: 'modal', componentsName: 'validPeriod'})
            }else {
                this.placeHolder = obj.message
                TweenMax.to('.valid-error', .3, {opacity: 1, height: 20})
            }
        },
        inputChange(e){
            this.textValue = e.target.value
        },
        validBtn(){
            app.modal.destroy({componentsName: 'validPeriod'})
        }
    },
    created() {

    },
    mounted() {
        this.getLicense();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.valid-period {
    opacity: 0;
}
.valid-period-wrapper {
    margin-top: 50px;
    text-align: center;
}
.valid-textarea {
    width: 600px;
    padding: 5px;
    min-height: 100px;
    margin-top: 20px;
    line-height:30px;
    background: rgba(0,0,0, .8);
    color: rgba(199, 255, 250, .3);
}
.valid-error {
    height: 0;
    opacity: 0;
}
.get-valid {

}
</style>